<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>APICloud App</title>
        <link rel="stylesheet" type="text/css" href="./css/api.css" />
        <style>
            html,
            body {
                height: 100%;
            }
            
            body {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-flex-flow: column;
                flex-flow: column;
            }
            
            section {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }
            
            header {
                position: relative;
                height: auto;
            }
            
            footer {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                box-sizing: border-box;
                height: 50px;
                background-color: rgb(250, 250, 250);
                border-top: 1px solid #ccc;
            }
            
            footer>div {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                width: 100%;
                color: rgb(165, 165, 165);
                font-size: 12px;
                text-align: center;
                padding-bottom: 4px;
                padding-top: 34px;
                background-repeat: no-repeat;
                background-position: center 6px;
                background-size: auto 24px;
            }
            
            footer>div:nth-child(1) {
                background-image: url(./image/footer/home.png);
            }
            
            footer>div:nth-child(2) {
                background-image: url(./image/footer/groupbuy.png);
            }
            
            footer>div:nth-child(3) {
                background-image: url(./image/footer/find.png);
            }
            
            footer>div:nth-child(4) {
                background-image: url(./image/footer/my.png);
            }
            
            footer>div:nth-child(1).active {
                background-image: url(./image/footer/home_act.png);
                color: rgb(254, 151, 84);
            }
            
            footer>div:nth-child(2).active {
                background-image: url(./image/footer/groupbuy_act.png);
                color: rgb(254, 151, 84);
            }
            
            footer>div:nth-child(3).active {
                background-image: url(./image/footer/find_act.png);
                color: rgb(254, 151, 84);
            }
            
            footer>div:nth-child(4).active {
                background-image: url(./image/footer/my_act.png);
                color: rgb(254, 151, 84);
            }
            
            .header-item {
                position: relative;
                display: none;
            }
            
            .header-item-act {
                display: block;
            }
            
            header>div:nth-child(1) {
                position: relative;
                background-color: rgb(255, 132, 0);
                height: 50px;
            }
            
            header>div:nth-child(2) {
                position: relative;
                height: 50px;
                background-color: rgb(252, 252, 252);
            }
            
            header>div:nth-child(3) {
                position: relative;
                height: 50px;
                background-color: rgb(252, 252, 252);
            }
            /* header home */
            
            .home-citylist {
                float: left;
                height: 50px;
                line-height: 50px;
                color: #fff;
                font-size: 14px;
                margin-left: 15px;
            }
            
            .home-citylist>img {
                height: 20px;
                vertical-align: top;
                padding-top: 15px;
            }
            
            .home-search {
                position: absolute;
                bottom: 8px;
                left: 90px;
                right: 60px;
                height: 34px;
                line-height: 34px;
                background-color: rgb(250, 102, 4);
                border-radius: 34px;
                color: rgb(253, 194, 155);
                font-size: 14px;
            }
            
            .home-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            
            .home-msg {
                float: right;
            }
            
            .home-msg>img {
                height: 28px;
                padding-top: 11px;
                vertical-align: top;
                padding-left: 15px;
                padding-right: 15px;
            }
            /* header groupbuy */
            
            .groupbuy-citylist {
                float: left;
                height: 50px;
                line-height: 50px;
                color: rgb(255, 132, 0);
                font-size: 18px;
                margin-left: 15px;
            }
            
            .groupbuy-citylist>img {
                height: 15px;
                vertical-align: top;
                padding-top: 18px;
            }
            
            .groupbuy-search {
                position: absolute;
                bottom: 8px;
                left: 110px;
                right: 15px;
                height: 34px;
                line-height: 34px;
                background-color: rgb(232, 232, 232);
                border-radius: 34px;
                color: rgb(153, 153, 153);
                font-size: 14px;
            }
            
            .groupbuy-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            /* header search */
            
            .find-search {
                position: absolute;
                bottom: 8px;
                left: 15px;
                right: 60px;
                height: 34px;
                line-height: 34px;
                border-radius: 34px;
                background-color: rgb(232, 232, 232);
                color: rgb(153, 153, 153);
                font-size: 14px;
            }
            
            .find-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            
            .find-scanner {
                float: right;
                width: 50px;
                background: url(./image/header/qrcode_search.png) no-repeat center 6px;
                background-size: auto 24px;
                padding-top: 33px;
                color: rgb(153, 153, 153);
                font-size: 12px;
                text-align: center;
            }
            
            .find-scanner-hov {
                background-color: #ddd;
            }
            
            .highlight {
                opacity: 0.7;
            }
        </style>
    </head>

    <body>
        <header id="header">
            <div class="header-item header-item-act" id="home">
                <div class="home-citylist open-win" win="html/citylist">
                    <span class="currentCity">武汉</span>
                    <img src="./image/header/arrow_down_home.png">
                </div>
                <div class="home-search open-win" win="html/search">
                    <img src="./image/header/search_home.png">
                    <span>输入商户名、地点</span>
                </div>
                <div class="home-msg open-win" win="html/message">
                    <img src="./image/header/msg_home.png">
                </div>
            </div>
            <div class="header-item" id="groupbuy">
                <div class="groupbuy-citylist open-win" win="html/citylist">
                    <span class="currentCity">北京</span>
                    <img src="./image/header/arrow_down_groupbuy.png">
                </div>
                <div class="groupbuy-search open-win" win="html/search">
                    <img src="./image/header/search_groupbuy.png">搜索团购...
                </div>
            </div>
            <div class="header-item" id="find">
                <div class="find-search open-win" win="html/search">
                    <img src="./image/header/search_groupbuy.png"> 输入商户名、地点
                </div>
                <div class="find-scanner" tapmode="highlight" onclick="fnOpenScanner()">
                    扫一扫
                </div>
            </div>
            <div class="header-item" id="my">
            </div>
        </header>
        <section></section>
        <footer id="footer">
            <div class="menu active" tapmode="active" onclick="fnChange(0)">首页</div>
            <div class="menu" tapmode="active" onclick="fnChange(1)">团购</div>
            <div class="menu" tapmode="active" onclick="fnChange(2)">发现</div>
            <div class="menu" tapmode="active" onclick="fnChange(3)">我的</div>
        </footer>
    </body>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/common.js"></script>
    <script type="text/javascript" src="./script/localdb.js"></script>
    <script type="text/javascript">
        apiready = function() {
            fnReadyOpenWin();

            if (!$api.getStorage('city')) {
                $api.setStorage('city', '北京');
            }

            fnInitListener();

            api.sendEvent({
                name: 'cityChange'
            });

            fnInit();

            fnOpenDatabase();
            fnChange(0);

            fnGetLocation(function() {
                setTimeout(function() {
                    fnOpenWelcome();
                }, 100);
            });
        };

        function fnInitListener() {
            var flag = false;
            api.addEventListener({
                name: 'keyback'
            }, function(ret, err) {
                if (false == flag) {
                    api.toast({
                        msg: '再按一次退出',
                        duration: 2000,
                        location: 'bottom'
                    });
                    flag = true;
                    setTimeout(function() {
                        flag = false;
                    }, 2000);
                } else {
                    api.closeWidget({
                        silent: true
                    });
                }
            });

            api.addEventListener({
                name: 'cityChange'
            }, function(ret, err) {
                var city = $api.getStorage('city') || '北京';

                if (city.length > 3) {
                    city = city.substring(0, 3) + '...';
                }

                var currentCity = $api.domAll('.currentCity');
                for (var i = 0; i < currentCity.length; i++) {
                    currentCity[i].innerHTML = city;
                };
            });
        };

        function fnGetLocation(callback) {
            var bmap = api.require('bMap');
            bmap.getLocation({
                autoStop: true
            }, function(ret, err) {
                if (ret.status) {
                    $api.setStorage('LBS', ret);
                    api.sendEvent({
                        name: 'custom_lbs'
                    });
                }

                callback();
            });
        };

        var headers, footers, headerHeight, footerHeight;

        function fnInit() {
            var header = $api.byId('header');
            var footer = $api.byId('footer');

            headers = $api.domAll(header, '.header-item');
            footers = $api.domAll(footer, 'div');

            for (var i = 0; i < headers.length; i++) {
                $api.fixIos7Bar(headers[i]);
            }

            headerHeight = $api.offset(header).h;
            footerHeight = $api.offset(footer).h;
        };

        function fnOpenScanner() {
            var fnscanner = api.require('FNScanner');
            fnscanner.openScanner({}, function(ret, err) {
                if (ret && 'success' == ret.eventType) {
                    alert(ret.content);
                }
            });
        };

        var frames = ['home_frame', 'groupbuy_frame', 'find_frame', 'my_frame'];

        function fnChange(index) {
            for (var i = 0; i < headers.length; i++) {
                if (index == i) {
                    $api.addCls(headers[i], 'header-item-act');
                    $api.addCls(footers[i], 'active');

                    var y = 3 == index ? 0 : headerHeight;
                    api.openFrame({
                        name: frames[i],
                        url: './html/' + frames[i] + '.html',
                        bounces: false,
                        bgColor: '#f0f0f0',
                        vScrollBarEnabled: false,
                        hScrollBarEnabled: false,
                        rect: {
                            x: 0,
                            y: y,
                            w: 'auto',
                            h: api.frameHeight - y - footerHeight
                        }
                    });
                } else {
                    $api.removeCls(headers[i], 'header-item-act');
                    $api.removeCls(footers[i], 'active');

                    api.setFrameAttr({
                        name: frames[i],
                        hidden: true
                    });
                }
            }
        };

        function fnOpenWelcome() {
            var frames = [];
            for (var i = 1; i <= 4; i++) {
                frames.push({
                    name: 'welcome_frame_' + i,
                    url: './html/welcome_frame_' + i + '.html',
                    bounces: false,
                    bgColor: './image/welcome/' + i + '.png'
                });
            }

            api.openFrameGroup({
                name: 'welcome_group',
                scrollEnabled: true,
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                index: 0,
                frames: frames
            });
        };
    </script>

</html>
